<template>
  <div>
    <cityheader></cityheader>
    <citysearch :cities = "cities"> </citysearch>
    <citylist :city = "cities" :hot = "hotCities" :letter = "letter"></citylist>
    <alphabet :city = "cities" @change="handle"></alphabet>
  </div>

</template>

<script>
import cityheader from './components/Header'
import  citysearch from './components/search'
import citylist from './components/list'
import alphabet  from './components/Alphabet'
import axios from 'axios';
export default {
    components: {
      cityheader,
      citysearch,
      citylist,
      alphabet

    },
    mounted (){
          this.getcitydata()
    },
    methods: {
      getcitydata(){
          axios.get("./api/city.json")
            .then(this.handsucc)
      },
      handsucc (res) {
          res = res.data;
          if(res.ret && res.data){
            const data = res.data;
            this.cities = data.cities;
            this. hotCities = data.hotCities;
          }
      },
      handle(letter){
            this.letter = letter
      }
    },
    data(){
      return {
        cities:{},
        hotCities:[],
        letter:''
      }
    }
}
</script>

<style scoped>

</style>
